<template>
    <div class="common">
        <div class="institution">
            <div class="title">
                <h1>{{ this.institution.name }}</h1>
                <el-tag v-if="this.institution.level != 10" v-text="levelText(this.institution.level)" effect="dark"
                    type="success"></el-tag>
            </div>
            <hr>
            <div class="context">
                <el-image v-if="this.institution.institutionImg" :src="this.institution.institutionImg"
                    style="display: inline-block;"></el-image>
                <el-image v-else src="src\assets\imgs\暂无图片.png"></el-image>
                <div class="context-text">
                    <p class="context-info">简介：{{ this.institution.description }}</p>
                    <p class="context-info">地址：{{ this.institution.address }}</p>
                    <p class="context-info">咨询电话：{{ this.institution.contact }}</p>
                </div>
            </div>
        </div>
        <div class="devices">
            <b class="title">医疗器械</b>
            <div class="device-list">
                <button class="scroll-left" v-if="devices.length > 9" @mousedown="scrollLeft" @mouseup="stopScrolling"
                    @mouseleave="stopScrolling">&lt;</button>
                <div class="content" v-if="devices.length > 0">
                    <div class="item" v-for="item in devices">
                        <el-image v-if="item.device_img" :src="item.device_img" class="device-img"
                            @click="showDevice(item)"></el-image>
                        <el-image v-else src="src\assets\imgs\暂无图片.png" class="device-img"
                            @click="showDevice(item)"></el-image>
                        <p class="device-name" v-text="item.name"></p>
                    </div>
                </div>
                <div class="empty" v-else>暂未上传相关数据</div>
                <button class="scroll-right" v-if="devices.length > 9" @mousedown="scrollRight" @mouseup="stopScrolling"
                    @mouseleave="stopScrolling">&gt;</button>
            </div>
        </div>
        <div class="departments">
            <h2 class="title">科室</h2>
            <div class="department">
                <el-button type="primary" v-for="item in departments" @click="selectDepartment(item)"
                    :plain="!item.isSelect">
                    {{ item.name }}
                </el-button>
            </div>
        </div>
        <div class="dates">
            <div class="date-text">选择日期</div>
            <el-button class="date-item" type="primary" v-for="item in dates" @click="selectDate(item)"
                :plain="!item.isSelect">
                {{ item.monthAndDay }}
                <br>
                {{ item.week }}
            </el-button>
        </div>
        <el-table :data="schedule" :span-method="arraySpanMethod" border @cell-click="handleCellClick">
            <el-table-column label="医生" prop="name" width="140" align="center">
                <template #default="scope">
                    <div class="doctor">
                        <el-image v-if="scope.row.user_img" :src="scope.row.user_img" class="doctor-img"></el-image>
                        <el-image v-else src="src\assets\imgs\方形默认头像.png" class="doctor-img"></el-image>
                        <p class="doctor-name" v-text="scope.row.name"></p>
                        <p class="doctor-title" v-text="scope.row.title"></p>
                        <el-rate v-if="scope.row.score" v-model="scope.row.score" :colors="colors" disabled show-score
                            text-color="#ff9900" :score-template="`${scope.row.score?.toFixed(1) || '0.0'}`"
                            size="small" />
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="挂号费" prop="fee" width="80" align="center">
                <template #default="scope">
                    {{ scope.row.fee }} 元/次
                </template>
            </el-table-column>
            <el-table-column label="擅长" prop="description" width="250" align="center">
                <template #default="scope">
                    <el-text line-clamp="6" v-text="scope.row.description">
                    </el-text>
                </template>
            </el-table-column>
            <!-- 显示上午下午 -->
            <el-table-column label="" width="40" align="center">
                <template #default="scope">
                    <div
                        v-if="new Date(`1970-01-01T${scope.row.start_time}`).getHours() < 12 && new Date(`1970-01-01T${scope.row.end_time}`).getHours() < 12">
                        <p class="time">上</p>
                        <p class="time">午</p>
                    </div>
                    <div v-else>
                        <p class="time">下</p>
                        <p class="time">午</p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="预约时间段" prop="time" align="center">
                <template #default="scope">
                    {{ scope.row.start_time.substring(0, 5) }}-{{ scope.row.end_time.substring(0, 5) }}
                </template>
            </el-table-column>
            <el-table-column label="剩余号次" prop="rest" width="100" align="center"></el-table-column>
            <el-table-column label="操作" width="110" align="center">
                <template #default="scope">
                    <el-button v-if="scope.row.status == 3" type="success" @click="" class="option_btn">已完成</el-button>
                    <el-button v-else-if="scope.row.status == 2" type="warning" @click=""
                        class="option_btn">进行中</el-button>
                    <el-button v-else-if="scope.row.is_overdue" type="info" @click="" class="option_btn">已过期</el-button>
                    <el-button v-else-if="scope.row.status == 0" type="warning"
                        @click="showCancelAppointment(scope.row)" class="option_btn">待确认</el-button>
                    <el-button v-else-if="scope.row.status == 1" type="success"
                        @click="showCancelAppointment(scope.row)" class="option_btn">预约成功</el-button>
                    <el-button v-else-if="scope.row.rest != 0 && !scope.row.is_overdue" type="primary"
                        @click="showAppoint(scope.row)" class="option_btn">预约</el-button>
                    <el-button v-else-if="scope.row.rest == 0" type="danger" @click="" class="option_btn">已满</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 预约弹窗 -->
        <el-dialog v-model="showAppointWindow" title="请填写并检查您的个人信息" :width="dialogWidth">
            <el-form :model="appointParams" label-width="120px" :rules="rules" ref="appointForm">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="appointParams.name"></el-input>
                </el-form-item>
                <el-form-item label="身份证号码" prop="id_card">
                    <el-input v-model="appointParams.id_card"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="appointParams.phone"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="addAppointment(appointParams)">确认</el-button>
                    <el-button @click="cancel()">取消</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 取消预约弹窗 -->
        <el-dialog v-model="showCancelWindow" title="确认取消预约吗？" :width="dialogWidth">
            <div class="cancel-appoint">
                <p v-text="'医疗机构：' + institution.name"></p>
                <p v-text="'预约科室：' + appointParams.department"></p>
                <p v-text="'预约医生：' + appointParams.doctor"></p>
                <p v-text="'预约时间：' + appointParams.date + '&nbsp;&nbsp;&nbsp;' + appointParams.start_time.substring(0, 5) + '-' +
                    appointParams.end_time.substring(0, 5)"></p>
                <p v-text="'您的姓名：' + appointParams.name"></p>
                <p v-text="'身份证号：' + appointParams.id_card"></p>
                <p v-text="'电话号码：' + appointParams.phone"></p>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="cancelAppointment(appointParams)">确认取消</el-button>
                    <el-button @click="showCancelWindow = false">保持预约</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 查看医疗器械弹窗 -->
        <el-dialog v-model="showDeviceWindow" title="医疗器械" :width="dialogWidth">
            <div class="device-info">
                <el-image v-if="device.device_img" :src="device.device_img" class="device-img"></el-image>
                <el-image v-else src="src\assets\imgs\暂无图片.png" class="device-img"></el-image>
                <p v-text="'名称：' + device.name"></p>
                <p v-text="'描述：' + device.description"></p>
                <p>
                    状态：
                    <span class="status">
                        <span v-if="device.status == 0">正常</span>
                        <span v-else>维护中</span>
                    </span>
                </p>
                <p v-text="'最新维护日期：' + device.last_maintenance_date.substring(0, 10)"></p>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { addAppointmentAPI, appointmentRecordsFindAPI, appointmentStatusFindAPI, cancelAppointmentAPI } from '@/api/appointment';
import { departmentFindAPI } from '@/api/department';
import { doctorsFindAPI } from '@/api/doctor';
import { evaluationComputeAPI } from '@/api/evaluate';
import { healthInstitutionFindByIdAPI } from '@/api/healthInstitution';
import { MedicalDevicesFindByInstitutionIdAPI } from '@/api/medicalDevice';
import { residentInfoUpdateAPI } from '@/api/resident';
import { scheduleFindAPI } from '@/api/schedule';
import { ElMessage } from 'element-plus';

export default {
    data() {
        return {
            params: {
                // 查询参数
                institution_id: this.$route.params.id,
                department_id: '',
                // 分页参数
                total: 0,
                currentPage: 1,
                pageSize: 7,
                doctorIds: [],
                devices: [],
                resident_id: JSON.parse(sessionStorage.getItem('user')).user_id
            },
            institution: {
                institution_id: this.$route.params.id
            },
            departments: [],
            devices: [],
            doctors: [],
            schedule: [],
            dates: [],
            showAppointWindow: false,
            showCancelWindow: false,
            showDeviceWindow: false,
            dialogWidth: '500px',
            resident: {
                name: JSON.parse(sessionStorage.getItem('user')).name,
                id_card: JSON.parse(sessionStorage.getItem('user')).id_card,
                phone: JSON.parse(sessionStorage.getItem('user')).phone
            },
            appointParams: {
                resident_id: JSON.parse(sessionStorage.getItem('user')).user_id,
                name: JSON.parse(sessionStorage.getItem('user')).name,
                id_card: JSON.parse(sessionStorage.getItem('user')).id_card,
                phone: JSON.parse(sessionStorage.getItem('user')).phone,
                doctor_id: '',
                institution_id: this.$route.params.id,
                schedule_id: '',
                fee: '',
                device: '',
                department: '',
                doctor: '',
                date: '',
                start_time: '',
                end_time: '',
                status: '',
                // 分页参数
                total: 0,
                currentPage: 1,
                pageSize: 7
            },
            rules: {
                name: { required: true, message: '姓名不能为空', trigger: 'blur' },
                id_card: [
                    { required: true, message: '身份证号码不能为空', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            const idRegex = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                            if (value !== '') {
                                if (idRegex.test(value)) {
                                    callback();
                                } else {
                                    callback(new Error('请输入有效的身份证号码'));
                                }
                            }
                        }
                    }
                ],
                phone: [
                    { required: true, message: '手机号不能为空', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            const phoneRegex = /^[0-9]{11}$/;
                            if (value !== '') {
                                if (phoneRegex.test(value)) {
                                    callback();
                                } else {
                                    callback(new Error('请输入有效的手机号'));
                                }
                            }
                        },
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    methods: {
        loadInstitution() {
            healthInstitutionFindByIdAPI(this.$route.params.id).then((resp) => {
                if (resp.data.code == 2000) {
                    this.institution = resp.data.data;
                } else {
                    ElMessage.error(resp.data.message);
                }
            })
        },
        loadMedicalDevices() {
            MedicalDevicesFindByInstitutionIdAPI(this.$route.params.id).then((resp) => {
                if (resp.data.code == 2000) {
                    this.devices = resp.data.datas;
                } else {
                    ElMessage.error(resp.data.message);
                }
            })
        },
        loadDepartments() {
            departmentFindAPI(this.institution).then((resp) => {
                if (resp.data.code == 2000) {
                    this.departments = resp.data.datas;
                    for (let i = 0; i < this.departments.length; i++) {
                        // 为每行数据添加一个isSelect
                        this.departments[i].isSelect = false;
                    }
                } else {
                    ElMessage.error(resp.data.message);
                }
            })
        },
        loadDoctors() {
            doctorsFindAPI(this.params).then((resp) => {
                if (resp.data.code == 2000) {
                    this.doctors = resp.data.datas;
                    for (let i = 0; i < this.doctors.length; i++) {
                        // 取出所有id为一个新的数组
                        this.params.doctorIds = [];
                        for (let j = 0; j < this.doctors.length; j++) {
                            this.params.doctorIds.push(this.doctors[j].user_id);
                        }
                    }
                    this.loadSchedule();
                } else {
                    ElMessage.error(resp.data.message);
                }
            })
        },
        loadSchedule() {
            scheduleFindAPI(this.params).then((resp) => {
                if (resp.data.code == 2000) {
                    this.schedule = resp.data.datas;
                    appointmentStatusFindAPI(this.params).then((resp) => {
                        if (resp.data.code == 2000) {
                            // 将status添加到schedule中
                            this.schedule.forEach((scheduleItem) => {
                                const statusItem = resp.data.datas.find((statusItem) => {
                                    return statusItem.schedule_id == scheduleItem.schedule_id;
                                });
                                if (statusItem) {
                                    scheduleItem.status = statusItem.status;
                                }
                            });
                        } else {
                            ElMessage.error(resp.data.message);
                        }
                    })
                    evaluationComputeAPI(this.params).then((resp) => {
                        if (resp.data.code == 2000) {
                            // 将score添加到schedule中
                            this.schedule.forEach((scheduleItem) => {
                                const scoreItem = resp.data.datas.find((scoreItem) => {
                                    return scoreItem.doctorId == scheduleItem.doctor_id;
                                });
                                if (scoreItem) {
                                    scheduleItem.score = scoreItem.score;
                                }
                            });
                        } else {
                            ElMessage.error(resp.data.message);
                        }
                    })
                } else {
                    this.schedule = '';
                    ElMessage.error(resp.data.message);
                }
            })
        },
        selectDepartment(item) {
            if (item.isSelect) {
                item.isSelect = false;
                this.params.department_id = '';
            } else {
                item.isSelect = true;
                this.params.department_id = item.id;
                this.departments.forEach(element => {
                    if (element != item) {
                        element.isSelect = false;
                    }
                });
            }
            this.loadDoctors();
        },
        // 合并医生姓名
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
                if (rowIndex % 4 === 0) {
                    return {
                        rowspan: 4,
                        colspan: 1,
                    }
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0,
                    }
                }
            }
            if (columnIndex === 3) {
                if (rowIndex % 2 === 0) {
                    return {
                        rowspan: 2,
                        colspan: 1,
                    }
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0,
                    }
                }
            }
        },
        selectDate(item) {
            if (item.isSelect) {
                // item.isSelect = false;
                // this.params.date = '';
            } else {
                item.isSelect = true;
                this.params.date = item.date;
                this.dates.forEach(element => {
                    if (element != item) {
                        element.isSelect = false;
                    }
                });
            }
            console.log(this.params);
            console.log(item);
            this.loadDoctors();
        },
        showAppoint(row) {
            this.appointParams.account = JSON.parse(sessionStorage.getItem('user')).account;
            this.appointParams.doctor_id = row.doctor_id;
            this.appointParams.schedule_id = row.schedule_id;
            this.appointParams.fee = row.fee;
            console.log(row);
            console.log(JSON.parse(sessionStorage.getItem('user')).account);


            this.showAppointWindow = true;
        },
        addAppointment(appointParams) {
            this.$refs.appointForm.validate((val) => {
                if (val) {
                    residentInfoUpdateAPI(appointParams).then((resp) => {
                        if (resp.data.code == 2000) {
                            addAppointmentAPI(appointParams).then((resp) => {
                                if (resp.data.code == 2000) {
                                    this.loadDoctors();
                                    this.showAppointWindow = false;
                                    ElMessage.success(resp.data.message);
                                    if (window.innerWidth < 768) {
                                        this.method = 'mobile';
                                    } else {
                                        this.method = 'pc';
                                    }
                                    // 支付挂号费
                                    window.open(
                                        "http://127.0.0.1:8081/alipay/pay?subject=" +
                                        "预约挂号" +
                                        "&traceNo=" +
                                        "预约" + resp.data.data.appointment_id +
                                        "&orderPrice=" +
                                        this.appointParams.fee +
                                        "&method=" +
                                        this.method,
                                        "_self"
                                    )
                                } else {
                                    ElMessage.error(resp.data.message);
                                }
                            });
                        } else {
                            ElMessage.error(resp.data.message);
                        }
                    });
                }
            });
        },
        showCancelAppointment(row) {
            this.appointParams.doctor = row.name;
            this.appointParams.department = row.department;
            this.appointParams.date = row.date;
            this.appointParams.start_time = row.start_time;
            this.appointParams.end_time = row.end_time;
            this.appointParams.fee = row.fee;
            this.appointParams.status = row.status;
            this.appointParams.schedule_id = row.schedule_id;
            this.showCancelWindow = true;
            console.log(this.appointParams);

        },
        cancelAppointment(appointParams) {
            appointmentRecordsFindAPI(appointParams).then((resp) => {
                if (resp.data.code == 2000) {
                    this.appointParams.appointment_id = resp.data.datas[0].id;
                    console.log(appointParams);
                    appointParams.tradeNo = "预约" + appointParams.appointment_id;
                    cancelAppointmentAPI(appointParams).then((resp) => {
                        if (resp.data.code == 2000) {
                            this.loadDoctors();
                            this.showCancelWindow = false;
                            ElMessage.success(resp.data.message);
                        } else {
                            ElMessage.error(resp.data.message);
                        }
                    });
                } else {
                    ElMessage.error(resp.data.message);
                }
            });
        },
        updateInfo(appointParams) {
            this.$refs.appointForm.validate((val) => {
                if (val) {
                    residentInfoUpdateAPI(appointParams).then((resp) => {
                        if (resp.data.code == 2000) {
                            ElMessage.success(resp.data.message);
                        } else {
                            ElMessage.error(resp.data.message);
                        }
                    });
                }
            });
        },
        cancel() {
            this.showAppointWindow = false;
            this.appointParams.name = this.resident.name;
            this.appointParams.id_card = this.resident.id_card;
            this.appointParams.phone = this.resident.phone;
        },
        scrollLeft() {
            this.startScrolling('left');
        },
        scrollRight() {
            this.startScrolling('right');
        },
        startScrolling(direction) {
            const container = this.$el.querySelector('.content');
            const scrollStep = 1; // 每次滚动的距离
            const intervalTime = 5; // 滚动间隔时间（毫秒）
            this.scrollInterval = setInterval(() => {
                if (direction === 'left') {
                    container.scrollLeft -= scrollStep / 2;
                } else if (direction === 'right') {
                    container.scrollLeft += scrollStep;
                }
            }, intervalTime);
        },
        stopScrolling() {
            clearInterval(this.scrollInterval);
        },
        showDevice(item) {
            this.showDeviceWindow = true;
            this.device = item;
        },
        setDialogWidth() {
            if (window.innerWidth < 768) {
                this.dialogWidth = '98vw';
            } else {
                this.dialogWidth = '500px';
            }
        },
        handleCellClick(row, column, cell, event) {
            if (column.property == 'name') {
                let doctorId = row.doctor_id;
                // 跳转查看患者评价页面
                this.$router.push('/evaluate/' + doctorId);
            }
        },
    },
    computed: {
        levelText() {
            return (level) => {
                switch (level) {
                    case 0:
                        return '三级特等';
                    case 1:
                        return '三级甲等';
                    case 2:
                        return '三级乙等';
                    case 3:
                        return '三级丙等';
                    case 4:
                        return '二级甲等';
                    case 5:
                        return '二级乙等';
                    case 6:
                        return '二级丙等';
                    case 7:
                        return '一级甲等';
                    case 8:
                        return '一级乙等';
                    case 9:
                        return '一级丙等';
                    case 10:
                        return '其他';
                }
            };
        }
    },
    created() {
        // 获取未来一周的年月日
        for (let i = 0; i < 7; i++) {
            let date = new Date();
            date.setDate(date.getDate() + i);
            let month = date.getMonth() + 1;
            let day = date.getDate();
            let week = date.getDay();
            switch (week) {
                case 0:
                    week = '日';
                    break;
                case 1:
                    week = '一';
                    break;
                case 2:
                    week = '二';
                    break;
                case 3:
                    week = '三';
                    break;
                case 4:
                    week = '四';
                    break;
                case 5:
                    week = '五';
                    break;
                case 6:
                    week = '六';
                    break;
            }
            // 将date转换为2024-11-24格式
            date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
            this.dates.push({
                date: date,
                monthAndDay: month + '/' + day,
                week: '周' + week,
                isSelect: false
            });
        }
        this.params.date = this.dates[0].date;
        this.dates[0].isSelect = true;
        this.loadInstitution();
        this.loadMedicalDevices();
        this.loadDepartments();
        this.loadDoctors();
    },
    mounted() {
        this.setDialogWidth();
        window.addEventListener('resize', this.setDialogWidth);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setDialogWidth);
    }
}
</script>

<style scoped>
.common {
    width: 100vw;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.institution {
    width: 100vw;
}

.institution .title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1200px;
}

.institution .el-tag {
    font-size: 16px;
    margin: 10px;
}

.institution h1 {
    font-size: 32px;
}

.institution .el-image {
    width: 330px;
    height: 220px;
}

.institution .context {
    margin-top: 10px;
    display: flex;
    width: 100%;
}

.institution .context .context-text {
    /* width: 500px; */
    flex: 1;
}

.institution .context .context-text .context-info {
    margin: 0 0 10px 20px;
}

.departments {
    margin: 20px 0;
}

.departments .title {
    margin-bottom: 5px;
}

.devices {
    margin: 20px 0 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.devices .title {
    font-size: 20px;
    margin-bottom: 5px;
    line-height: 100%;
    display: flex;
    align-items: center;
}

.devices .device-list {
    display: flex;
    padding: 0 28px;
    width: 1110px;
}

.devices .content {
    display: flex;
    border-radius: 6px;
    background-color: rgba(124, 196, 255, 0.385);
    padding: 5px;
    /* 横向滚动 */
    overflow: auto;
    /* 保留滚动功能不显示滚动条 */
    /* IE 和 Edge */
    -ms-overflow-style: none;
    /* Firefox */
    scrollbar-width: none;
}

.devices .content::-webkit-scrollbar {
    /* Chrome, Safari 和 Opera */
    display: none;
}

.devices .content .item .device-img {
    margin: 5px;
    width: 100px;
    height: 100px;
    cursor: pointer;
}

.devices .content .item .device-name {
    text-align: center;
}

.devices .empty {
    color: #909399;
}

.device-list {
    position: relative;
}

.scroll-left,
.scroll-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 999;
}

.scroll-left {
    left: 0;
}

.scroll-right {
    right: 0;
}

.device-info .device-img {
    width: 200px;
}

.device-info p {
    margin: 5px 0;
}

.dates {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 70px;
    background-color: #ffffff;
    border: 1px solid #afcbf8;
    overflow-x: auto;
    overflow-y: hidden;
}

.dates .date-text {
    width: 500px;
    text-align: center;
    border-right: 1px solid rgb(175, 203, 248);
}

.dates .date-item {
    flex: 1;
    width: 80px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    margin: 10px;
    cursor: pointer;
}

.time {
    margin: 10px 0;
}

.doctor {
    cursor: pointer;
    line-height: 1.2;
}

.doctor .doctor-img {
    border-radius: 6px;
}

.doctor .doctor-title {
    font-size: 14px;
    font-family: '楷体', '仿宋';
    color: #909399;
}

.option_btn {
    width: 80px;
}

.cancel-appoint {
    margin: 0 50px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

.cancel-appoint p {
    margin: 5px 0;
}

@media (max-width: 768px) {
    .institution .title {
        flex-direction: column;
        width: 100vw;
    }

    .institution .context {
        flex-direction: column;
        align-items: center;
    }

    .institution .context .context-text {
        margin-top: 1.5vh;
    }

    .devices {
        flex-direction: column;
        align-items: center;
    }

    .devices .title {
        width: 100%;
        justify-content: start;
    }

    .devices .device-list {
        padding: 0;
        width: 98vw;
    }

    .scroll-left,
    .scroll-right {
        display: none;
    }

    .department {
        display: flex;
        flex-wrap: wrap;
    }

    .department .el-button {
        margin: 0 10px 0 0;
    }

    .dates {
        width: 100%;
        height: 15vw;
    }

    .dates .date-text {
        width: 500px;
        text-align: center;
        border-right: 1px solid rgb(175, 203, 248);
    }

    .dates .date-item {
        width: 10vw;
        height: 10vw;
        margin: 1.2vw;
    }
}
</style>
